<template>
  <div class="pageHeader" :class="{'active': scrollHeight > 100 || route.name == 'newsDetail'}">
    <div class="pageContainer">

      <div class="logo" @click="router.push('/')">
        <img class="img img1" :src="systemDto.topLogoUrl"/>
        <img class="img img2"  src="@/assets/images/index/logo2.png"/>
      </div>

      <div class="menu">
        <div
          class="item"
          v-for="(item, index) in menuList"
          @click="linkTo(item.url)"
          :class="{'active': route.path === item.url}">{{item.name}}
        </div>
      </div>

      <div class="headerRight">
        <div class="left">
          <!--<div class="item" style="border: 1px solid #f00">-->
            <!--<img class="icon img1" src="@/assets/images/index/icon1.png"/>-->
            <!--<img class="icon img2" src="@/assets/images/index/icon1_1.png"/>-->
          <!--</div>-->
          <div class="item" style="">
            <el-dropdown @command="handleCommand" style="outline: none; font-size: 0.9vw;">
              <span class="el-dropdown-link" :style="{'color': scrollHeight > 100 || route.name == 'newsDetail'  ? '#333' : '#fff'}"
                    style="outline: none; display: flex; align-items: center;">
                <img class="icon img1" src="@/assets/images/index/icon2.png"/>
                <img class="icon img2" src="@/assets/images/index/icon2_1.png"/>
                <span class="text" style="padding-left: 0.2vw"> {{currentLan}}</span>
              </span>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="lang in langs" :command="lang">{{ lang.title }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </div>
        <div class="right">
          <div class="imgWrap">
            <img class="img img1" style="" src="@/assets/images/index/icon3.png"/>
            <img class="img img2" style="" src="@/assets/images/index/icon3_1.png"/>
            <span class="type" style="text-align: center;"> {{systemDto.connectUs}} </span>
          </div>
          <div class="text">{{systemDto.tel}}</div>
        </div>
      </div>
    </div>
  </div>

</template>
<script setup>
  import {ref, watchEffect, onMounted} from 'vue'
  import {langs} from '../locales'
  import {useLocaleStore} from '../store/locales.js'
  import {useRouter, useRoute} from 'vue-router'
  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()
  const router = useRouter()
  const route = useRoute()

  const useLocale = useLocaleStore()
  let curLocale = useLocale.locale
  let currentLan = ref(langs.find((cur) => cur.key === curLocale)?.title || '')

  const scrollHeight = ref(0)
  const menuList = ref([])
  const systemDto = ref({})

  watchEffect(() => {
    scrollHeight.value = useLocale.scrollHeight
    menuList.value = useLocale.menuList
    systemDto.value = useLocale.systemDto
  })

  onMounted(() => {
    if (route.query.language == 1 || route.query.language == 2) {
      let curVal = route.query.language == 2 ? 'en' : 'zh'
      currentLan.value = langs.find((cur) => cur.key === curVal)?.title || ''
    }
  })

  function handleCommand(command) {
    currentLan.value = command.title
    useLocale.setLocale(command.key)
    let lsLocale = {
      curLocale: command.key
    }
    console.log(lsLocale)
    localStorage.setItem('locale', JSON.stringify(lsLocale))

    // if (route.query.id) {
    //   location.href = `/shenwei/#${route.path}?id=${route.query.id}&language=${lsLocale.curLocale === 'en' ? 2 : 1}`
    // } else {
    //   location.href = `/shenwei/#${route.path}?language=${lsLocale.curLocale === 'en' ? 2 : 1}`
    // }
    // setTimeout(() => {
    //   location.reload()
    // }, 100)

    location.reload()
  }

  const langsChange = (val) => {
    console.log(val, 333)
  }

  // 路由跳转
  const linkTo = (url) => {
    routerLink(url)
    document.body.scrollTop =document.documentElement.scrollTop=0;
  }

</script>
<style scoped lang="scss">
  .pageHeader {
    height: 4.425vw;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: fixed;
    z-index: 9;
    width: 100%; left: 0 ; top : 0;

    &.active {
      color: #1A1A25;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      .pageContainer {
        .logo {
          .img {
            &.img1 {
              display: none;
            }
            &.img2 {
              display: block;
            }
          }
        }
        .menu {
          .item {
            &:hover{
              color: #999;
            }
            &.active {
              border-bottom: 2px solid #1027ef;
            }
          }
        }
        .headerRight {
          .left {
            .item {
              .icon {
                width: 1.3vw;
                &.img1 {
                  display: none;
                }
                &.img2 {
                  display: block;
                }
              }
            }
          }
          .right {
            border-left: 1px solid #eee;
            .imgWrap {
              .img {
                &.img1 {
                  display: none;
                }
                &.img2 {
                  display: block;
                }
              }
            }
          }
        }
      }
    }

    .pageContainer {
      height: 100%;
      width: 75vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .logo {
        width: 10vw;
        height: auto;
        padding-top: 1vw;
        .img {
          display: inline-block;
          width: 100%;
          &.img1 {
            display: block;
          }
          &.img2 {
            display: none;
          }
        }
      }
      .menu {
        display: flex;
        justify-content: space-between;
        line-height: 4.4vw;
        margin: 0 3vw 0 4vw;
        font-size: 1vw;
        height: 4.425vw;
        width: 43vw;
        .item {
          padding: 0 0.2vw;
          cursor: pointer;
          &:hover{
            color: #eee;
          }
          &.active {
            border-bottom: 2px solid rgba(255, 255, 255, 1);
          }
        }
      }

      .headerRight {
        width: 18vw;
        height: 4.425vw;
        display: flex;
        .left {
          display: flex;
          align-items: center;
          padding: 0 1.5vw;
          font-size: 0.8vw;
          .item {
            display: flex;
            cursor: pointer;
            align-items: center;
            padding: 0 0.5vw;
            .icon {
              width: 1.3vw;
              &.img1 {
                display: block;
              }
              &.img2 {
                display: none;
              }
              img {
                width: 100%;
                display: inline-block;
              }
            }
          }
        }
        .right {
          border-left: 1px solid rgba(255, 255, 255, 0.3);
          padding-top: 1vw;
          text-align: right;
          width: 8vw;

          .type {
            font-size:0.9vw;
            padding-left: 0.2vw;
          }
          .text {
            font-size: 0.9vw; font-weight: bold;
          }
          .imgWrap {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .img {
              width: 1.3vw;
              display: inline-block;
              text-align: end;
              &.img1 {
                display: block;
              }
              &.img2 {
                display: none;
              }
            }
          }
        }
      }
    }
  }
</style>
